<template>
  <div class="breadcrumbWrapp">
    <div class="breadcrumb container-x-suit">
      <div class="breadcrumb-p">
        <div class="breadcrumb-icon"><i class="icon-homepage_fill"></i></div>
        <el-breadcrumb class="element" separator="/">
          <el-breadcrumb-item
            v-for="cRoute in chainRouter"
            :to="cRoute.path"
            :key="cRoute.title">
            {{ cRoute.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <ul class="breadcrumb-right">
          <li
            v-for="bRoute in brothRouter"
            :key="bRoute.title"
            v-text="bRoute.title">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { appRouter } from '@/router/router'

export default {
  name: 'Breadcrumb',
  data() {
    return {
      chainRouter: [
        {
          title: '',
          path: ''
        }
      ],
      brothRouter: [
        {
          title: '',
          path: ''
        }
      ]
    }
  },
  mounted() {
    console.log(this.$route)
    // const reg = /(\/\w+)(?:\/(?=$))?/g
    // const str = '/c?/a=3/a'
    // console.log(str.match(reg))
    // console.log(this.$route)
    // console.log(routers)
  },
  methods: {
    initChainR() {
      const pRouters = this.$route.matched

      let chainRouter = []
      pRouters.forEach((route) => {
        chainRouter.push({
          title: route.meta && route.meta.title,
          path: route.path
        })
      })

      this.chainRouter = chainRouter
    },
    initBrothR() {
      const pRoute = this.$route.matched[1]
      let currentRouter = null

      // *不支持Array.find()
      appRouter.forEach((route) => {
        if (route.path === pRoute.path) {
          currentRouter = route
        }
      })

      if (!currentRouter) {
        return
      }

      let brothRouter = []
      currentRouter.children && currentRouter.children.forEach((route) => {
        brothRouter.push({
          title: route.meta.title,
          path: `${pRoute.path}/${route.path}`
        })
      })
      this.brothRouter = brothRouter
    }
  },
  watch: {
    '$route': {
      handler: function (newV, oldV) {
        // if (newV.path === oldV.path) {
        //   return false
        // }
        this.initChainR()
        this.initBrothR()
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'

.el-breadcrumb__inner
  &.is-link
    color: $color-text-rule

.breadcrumbWrapp
  width: 100%
  border-bottom: 2px solid #f2f2f2
  .breadcrumb
    overflow: hidden
    .breadcrumb-p
      padding: 0 20px
    .breadcrumb-icon
      float: left
      text-align: center
      background-color: #f2f2f2
      width: 56px
      height @width
      line-height: @width + 2px
      i
        font-size: 18px
    .el-breadcrumb
      &.element
        padding: 21px
        float: left
    ul.breadcrumb-right
      float: right
      &>li
        color: $color-text-rule
        font-size: 14px
        float: left
        padding: 0 10px
        height: 56px
        line-height: 56px

@media (max-width: $media-smail)
  .breadcrumb-right
    display: none
</style>
